<template>
  <a-layout>
    <a-layout-content id="register-layout">
      <div
        id="register-main-layout"
        :style="{ width: mobile ? '350px' : '500px' }"
      >
        <a-form
          id="register-form-layout"
          :style="{ width: mobile ? '250px' : '500px' }"
          :form="form"
          :label-col="{ span: 8, offset: 1 }"
          :wrapper-col="{ span: 12 }"
          @submit="registSubmit"
          @submit.native.prevent
        >
          <!-- 身份证号码 -->
          <a-form-item label="身份证号码">
            <a-input
              v-decorator="[
                'personId',
                {
                  rules: [
                    { required: true, message: '请输入身份证号码' },
                    {
                      pattern:
                        /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
                      message: '请输入有效身份证号码',
                    },
                  ],
                },
              ]"
              placeholder="请输入身份证号码"
            >
            </a-input>
          </a-form-item>
          <!-- 真实姓名 -->
          <a-form-item label="用户真实姓名">
            <a-input
              v-decorator="[
                'name',
                {
                  rules: [{ required: true, message: '请输入真实姓名' }],
                },
              ]"
              placeholder="请输入真实姓名"
            >
            </a-input>
          </a-form-item>
          <!-- 性别 -->
          <a-form-item label="性别">
            <a-select
              v-decorator="[
                'gender',
                {
                  rules: [{ required: true, message: '请选择你的性别' }],
                },
              ]"
              placeholder="请选择你的性别"
            >
              <a-select-option value="男"> 男 </a-select-option>
              <a-select-option value="女"> 女 </a-select-option>
            </a-select>
          </a-form-item>
          <!-- 民族 -->
          <a-form-item label="民族">
            <a-select
              show-search
              option-filter-prop="children"
              :filter-option="filterOption"
              v-decorator="[
                'nation',
                {
                  rules: [{ required: true, message: '请选择你的民族' }],
                },
              ]"
              placeholder="请选择你的民族"
            >
              <a-select-option
                v-for="nation in nationData"
                :key="nation.id"
                :value="nation.name"
              >
                {{ nation.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <!-- 住址 -->
          <a-form-item label="家庭住址">
            <a-input
              v-decorator="[
                'address',
                {
                  rules: [{ required: true, message: '请输入家庭住址' }],
                },
              ]"
              placeholder="请输入家庭住址"
            >
            </a-input>
          </a-form-item>
          <!-- 联系电话 -->
          <a-form-item label="联系电话">
            <a-input
              v-decorator="[
                'phone',
                {
                  rules: [
                    { required: true, message: '请输入联系电话' },
                    {
                      pattern: /^\d{11}$/,
                      message: '请输入有效联系电话',
                    },
                  ],
                },
              ]"
              placeholder="请输入联系电话"
            >
            </a-input>
          </a-form-item>
          <!-- 邮箱 -->
          <a-form-item label="邮箱">
            <a-input
              v-decorator="[
                'email',
                {
                  rules: [
                    { required: true, message: '请输入邮箱账号' },
                    {
                      pattern: /^[\w-]+@[\w-]+(\.[\w-]+)+$/,
                      message: '请输入有效邮箱',
                    },
                  ],
                },
              ]"
              placeholder="请输入邮箱账号"
            >
            </a-input>
          </a-form-item>
          <!-- 验证码 -->
          <a-form-item label="邮箱验证码">
            <a-input
              style="float: left; width: 55%; margin-top: 3px;"
              v-decorator="[
                'captcha',
                {
                  rules: [{ required: true, message: '请输入注册验证码' }],
                },
              ]"
              placeholder="请输入注册验证码"
            >
            </a-input>
            <a-button
              id="register-captcha-button"
              html-type="button"
              :disabled="isCaptcha"
              @click="registerEmailCaptcha"
            >
              {{ captcha }}
            </a-button>
          </a-form-item>
          <!-- 登录密码 -->
          <a-form-item label="登录密码">
            <a-input-password
              v-decorator="[
                'password',
                {
                  rules: [
                    { required: true, message: '请输入登录密码' },
                    { min: 8, message: '请输入8~12位密码' },
                    { max: 12, message: '请输入8~12位密码' },
                  ],
                },
              ]"
              type="password"
              placeholder="请输入登录密码"
            >
            </a-input-password>
          </a-form-item>
          <!-- 二次确认 -->
          <a-form-item label="二次确认密码">
            <a-input-password
              v-decorator="[
                'secondaryPassword',
                {
                  rules: [
                    { required: true, message: '请输入二次确认密码' },
                    { min: 8, message: '请输入8~12位密码' },
                    { max: 12, message: '请输入8~12位密码' },
                  ],
                },
              ]"
              type="password"
              placeholder="请输入二次确认密码"
            >
            </a-input-password>
          </a-form-item>
          <!-- 注册按钮 -->
          <a-form-item :wrapper-col="{ span: 12, offset: mobile ? 0 : 6 }">
            <a-button
              style="width: 100%; margin-bottom: 13px"
              type="primary"
              html-type="submit"
              :loading="isLoad"
            >
              立即注册
            </a-button>
            或
            <a @click="loginFrom"> 立即登录! </a>
          </a-form-item>
        </a-form>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "Register",
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "register" });
  },
  data() {
    return {
      captcha: "获取验证码",
      isLoad: false,
      isCaptcha: false,
      nationData: [
        { id: 1, name: "汉族" },
        { id: 2, name: "蒙古族" },
        { id: 3, name: "回族" },
        { id: 4, name: "藏族" },
        { id: 5, name: "维吾尔族" },
        { id: 6, name: "苗族" },
        { id: 7, name: "彝族" },
        { id: 8, name: "壮族" },
        { id: 9, name: "布依族" },
        { id: 10, name: "朝鲜族" },
        { id: 11, name: "满族" },
        { id: 12, name: "侗族" },
        { id: 13, name: "瑶族" },
        { id: 14, name: "白族" },
        { id: 15, name: "土家族" },
        { id: 16, name: "哈尼族" },
        { id: 17, name: "哈萨克族" },
        { id: 18, name: "傣族" },
        { id: 19, name: "黎族" },
        { id: 20, name: "傈僳族" },
        { id: 21, name: "佤族" },
        { id: 22, name: "畲族" },
        { id: 23, name: "高山族" },
        { id: 24, name: "拉祜族" },
        { id: 25, name: "水族" },
        { id: 26, name: "东乡族" },
        { id: 27, name: "纳西族" },
        { id: 28, name: "景颇族" },
        { id: 29, name: "柯尔克孜族" },
        { id: 30, name: "土族" },
        { id: 31, name: "达翰尔族" },
        { id: 32, name: "么佬族" },
        { id: 33, name: "羌族" },
        { id: 34, name: "布朗族" },
        { id: 35, name: "撒拉族" },
        { id: 36, name: "毛南族" },
        { id: 37, name: "仡佬族" },
        { id: 38, name: "锡伯族" },
        { id: 39, name: "阿昌族" },
        { id: 40, name: "普米族" },
        { id: 41, name: "塔吉克族" },
        { id: 42, name: "怒族" },
        { id: 43, name: "乌孜别克族" },
        { id: 44, name: "俄罗斯族" },
        { id: 45, name: "鄂温克族" },
        { id: 46, name: "德昂族" },
        { id: 47, name: "保安族" },
        { id: 48, name: "裕固族" },
        { id: 49, name: "京族" },
        { id: 50, name: "塔塔尔族" },
        { id: 51, name: "独龙族" },
        { id: 52, name: "鄂伦春族" },
        { id: 53, name: "赫哲族" },
        { id: 54, name: "门巴族" },
        { id: 55, name: "珞巴族" },
        { id: 56, name: "基诺族" },
      ],
    };
  },
  computed: {
    mobile() {
      return this.$mobile;
    },
  },
  methods: {
    ...mapActions("user", {
      register: "register",
      emailCaptcha: "emailCaptcha",
    }),
    // 发送邮箱验证码
    registerEmailCaptcha(e) {
      e.preventDefault();
      let email = this.form.getFieldValue("email");
      // 验证邮箱部分
      if (email == undefined) {
        this.$message.error("请输入邮箱");
      } else {
        // 60秒处理时间
        this.isCaptcha = true;
        this.$message.loading("发送邮箱验证码中......", 0);
        let result = this.emailCaptcha(email);
        result
          .then((value) => {
            let time60 = 60;
            let _this = this;
            this.captcha = time60;
            let count = setInterval(function () {
              if (time60 != 0) {
                time60 -= 1;
                _this.captcha = time60;
              } else {
                clearInterval(count);
                _this.isCaptcha = false;
                _this.captcha = "获取验证码";
              }
            }, 1000);
            this.$notification.open({
              message: "验证码已发送至邮箱",
            });
          })
          .catch((error) => {
            this.$message.error("验证码发送失败");
          });
      }
    },
    // 查询民族列表
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    // 注册表单
    registSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          // 密码二次校验
          if (values.password == values.secondaryPassword) {
            delete values.secondaryPassword;
            values.birthday =
              values.personId.slice(6, 10) +
              "-" +
              values.personId.slice(10, 12) +
              "-" +
              values.personId.slice(12, 14);
            this.isLoad = true;
            this.$message.loading("注册中......", 0);
            let result = this.register(values);
            result
              .then((value) => {
                this.$message.success("注册成功");
                this.$bus.$emit("switchLoginRegister", "login");
                this.$router.replace({
                  name: "Login",
                });
              })
              .catch((error) => {
                this.isLoad = false;
              });
          } else {
            this.$message.error("两次密码不一致");
          }
        }
      });
    },
    // 返回登录界面
    loginFrom(e) {
      e.preventDefault();
      this.$bus.$emit("switchLoginRegister", "login");
      this.$router.replace({
        name: "Login",
      });
    },
  },
};
</script>

<style scoped>
#register-layout {
  background: #fff;
}
#register-main-layout {
  margin: 30px auto;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 6px 0 rgb(0 0 0 / 20%);
}
#register-form-layout {
  margin: 55px auto;
}
#register-captcha-button {
  width: 41%;
  float: right;
  text-align: center;
  margin-top: 3px;
}
</style>